<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/layout">
    <title layout:fragment="title">添加角色</title>
<body>
<div class="main-content" layout:fragment="content">
    <div class="breadcrumbs" id="breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a href="/">首页</a>
            </li>
            <li><a href="/roles/home">角色管理</a></li>
            <li class="active">添加角色</li>
        </ul>
    </div>

    <!-- .page-content -->
    <div class="page-content">
        <div class="page-header">
            <h1 th:text="添加角色"></h1>
        </div>

        <div class="col-xs-12">
            <a href="javascript:;" class="btn btn-primary btn-sm" id="submit">
                保存<i class="icon-save icon-on-right bigger-120"></i>
            </a>
        </div>
        <br>
        <div class="col-xs-12">
            <br>
            <div class="alert alert-block alert-success">
                <button type="button" class="close" data-dismiss="alert">
                    <i class="icon-remove"></i>
                </button>
                输入角色名称，然后选择角色类型，以加载不同的资源列表。角色类型不同，可访问资源亦不同。
            </div>
            <div class="page-header">
                <h3 th:text="角色基本信息"></h3>
            </div>
            <form method="post" th:action="@{/roles/save}" id="save-form"  class="form-horizontal">
                <input type="hidden" name="resIds" id="resIds">
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right"> 角色名：<span class="red">*</span></label>
                    <div class="col-sm-9">
                        <input type="text" id="name" name="name" placeholder="请输入角色名" class="col-xs-10 col-sm-5">
                        <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right"
                              data-content="角色名称最多为10个字符，且不能重复" title="" data-original-title="提示">?</span>
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right"> 类型：<span class="red">*</span></label>
                    <div class="col-sm-9">
                        <select class="col-xs-10 col-sm-5" id="type" name="type">
                            <option value="">请选择</option>
                            <option th:value="1">平台</option>
                            <option th:value="2">物业</option>
                            <option th:value="3">商场</option>
                        </select>
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right"> 描述：</label>
                    <div class="col-sm-9">
                        <textarea name="description" class="col-xs-10 col-sm-5" rows="5"></textarea>
                    </div>
                </div>
                <div class="space-4"></div>
            </form>
        </div>

        <div class="col-xs-12">
            <div class="page-header">
                <h3 th:text="角色权限设置"></h3>
            </div>

            <table class="table table-bordered table-hover dataTable">
                <thead>
                <tr>
                    <th style="text-align: center;width: 30%;">资源名称</th>
                    <th style="text-align: center;width: 70%;">描述</th>
                </tr>
                </thead>
                <tbody class="" id="tips">
                <tr>
                    <td colspan="2" class="center">暂无可选资源</td>
                </tr>
                </tbody>
            </table>
            <table class="table table-bordered table-hover dataTable hide" id="res-table">
                <tbody>
                <tr th:each="res: ${resources}">
                    <td style="width: 30%;">
                        <div class="checkbox">
                            <label>
                                <input name="resource" type="checkbox" th:attr="resid=${res.id}" th:attrappend="subjecttype=${res.subjectType}" class="ace">
                                <span class="lbl" th:text="${res.name}"></span>
                            </label>
                        </div>
                    </td>
                    <td th:text="${res.description}" style="vertical-align: middle;"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script layout:fragment="script" th:src="@{/assets/js/role/add.js}"></script>
</body>
</html>